<script setup lang="ts">
    import { useRoute, useRouter} from 'vue-router'
    import {userStore} from '@/store/user'
    const store = userStore()
    const route = useRoute()
    const router = useRouter()
    const gotoPage = (path:any) =>{
        router.push(path)
    }
</script>
<template>
  <dl>
    <dt class="icon-task-bar" :class="route.path=='/task'?'active':''" @click="gotoPage('/task')">
        <i></i>
        <p>当牛马</p>
    </dt>
<!--    <dt v-if="store.role == '2'" class="icon-task-bar" :class="route.path=='/admin/home'?'active':''" @click="gotoPage('/admin/home')">-->
<!--        <i></i>-->
<!--        <p>首页</p>-->
<!--    </dt>-->
<!--    <dt  v-if="store.role == '3'" class="icon-talent-bar" :class="route.path=='/talent'?'active':''" @click="gotoPage('/talent')">-->
<!--        <i></i>-->
<!--        <p>IT人才</p>-->
<!--    </dt>-->
<!--    <dt v-if="store.role != '2'" class="icon-contract-bar" :class="route.path=='/contract'?'active':''" @click="gotoPage('/contract')">-->
<!--        <i></i>-->
<!--        <p>合约</p>-->
<!--    </dt>-->
    <dt v-if="store.role != '2'" class="icon-message-bar" :class="route.path=='/message'?'active':''" @click="gotoPage('/message')">
        <i></i>
        <p>牛马的消息</p>
    </dt>
    <dt class="icon-my-bar" :class="route.path=='/my'?'active':''" @click="gotoPage('/my')">
        <i></i>
        <p>牛马信息</p>
    </dt>
  </dl>
</template>
<style scoped>
dl{
    display: flex;
    width: 100%;
    height: 3rem;
    position: fixed;
    bottom: 0px;
    left: 0px;
    border-top: 1px solid #dddddd;
    background: #ffffff;
}
dl dt{
    flex: 1;
    padding: 0.69rem 0;
    justify-content: center;
    text-align: center;
    font-size: 0.59rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #666666;
}
dl dt i{
    width: 0.91rem;
    height: 0.91rem;
    display: block;
    margin: 0 auto;
}
.icon-task-bar i{
    background: url('@/assets/img/icon/bar-task-link.png') no-repeat;
    background-size: 100%;
}
.icon-task-bar.active i{
    background: url('@/assets/img/icon/bar-task-active.png') no-repeat;
    background-size: 100%;
}
.icon-talent-bar i{
    background: url('@/assets/img/icon/bar-talent-link.png') no-repeat;
    background-size: 100%;
}
.icon-talent-bar.active i{
    background: url('@/assets/img/icon/bar-talent-active.png') no-repeat;
    background-size: 100%;
}
.icon-contract-bar i{
    background: url('@/assets/img/icon/bar-contract-link.png') no-repeat;
    background-size: 100%;
}
.icon-contract-bar.active i{
    background: url('@/assets/img/icon/bar-contract-active.png') no-repeat;
    background-size: 100%;
}
.icon-message-bar i{
    background: url('@/assets/img/icon/bar-message-link.png') no-repeat;
    background-size: 100%;
}
.icon-message-bar.active i{
    background: url('@/assets/img/icon/bar-message-active.png') no-repeat;
    background-size: 100%;
}
.icon-my-bar i{
    background: url('@/assets/img/icon/bar-my-link.png') no-repeat;
    background-size: 100%;
}
.icon-my-bar.active i{
    background: url('@/assets/img/icon/bar-my-active.png') no-repeat;
    background-size: 100%;
}
dl dt.active p{
    color: #ff9415;
}
</style>